<template>
  <page-header-wrapper>
    <a-card :bordered="false">
       <a-descriptions title="" bordered>
    <a-descriptions-item v-for="(item) in options" :key="item.id" :label="item.name">
      <div>
      <img class="avatar" :src="formatAvatar(item.text)" alt="file"/>
      <a-row>
        <a-col :md="8" :sm="24">
            <a-upload v-if="item.code=='invite_bg'"
          :file-list="file"
          :customRequest="beforeUpload"
        >
          <a-button> <a-icon type="upload" /> 上传背景图 </a-button>
        </a-upload>
        </a-col>
        <a-col :md="8" :sm="24">
        <a-button type="primary" icon="save" @click="handleSave(item)" >保存</a-button>
        </a-col>
      </a-row>
      </div>
     
      
    </a-descriptions-item>
  </a-descriptions>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getList,updates } from '@/api/options'
import {upload} from "@/api/common";
export default {
  components: {
  },
  data () {
    return {
        options:[],
        file:[]
    }
  },
  mounted(){
    this.loadData();
  },
  methods: {
    loadData(){
 let that = this;
      getList()
          .then(res => {
            that.options = res.data
          })
    },
    formatAvatar(e) {
      if (e) {
        return this.$staticPrefix(e);
      }
    },
    handleSave(item){
      if(this.file.length<1){
          return;
      }
      updates({code:item.code,text:this.file[0].name})
      .then(res=>{
          this.loadData();
          this.$message.info('保存成功')
      })
    },
    beforeUpload(e) {
      const formatData = new FormData()
      formatData.append('file', e.file)
      upload(formatData).then(ret => {
        if (ret.success) {
          formatData.delete('file');
          this.file = [
            {
              uid: 1,
              name: ret.data,
              status: 'done',
              url: this.$staticPrefix(ret.data),
              thumbUrl: this.$staticPrefix(ret.data),
            },
          ]
        }
      })
    },
  }
}
</script>
